.card-box {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin: .12rem;
    padding: .16rem 0 0;
    background: #fff;
    border-radius: .08rem
}

.card-box .card-list {
    -webkit-box-align: center;
    align-items: center
}

.card-box .card-list,.card-box .card-list .card-ball {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row
}

.card-box .card-list .card-ball {
    margin: .13rem .12rem .14rem;
    flex-wrap: wrap
}

.card-box .card-list .card-vic {
    margin: .13rem 0 .14rem;
    padding: 0 .12rem
}

.card-box .card-list .card-match,.card-box .card-list .card-vic {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap
}

.card-box .card-list .card-match {
    margin: .23rem .16rem .24rem;
    width: 100%;
    font-size: .16rem;
    line-height: 1;
    color: #333
}

.card-box .card-list .card-mricon {
    flex-shrink: 0
}

.card-box .card-list .card-iconfix,.card-box .card-list .card-mricon {
    margin-left: auto;
    margin-right: .12rem;
    width: .16rem;
    height: .16rem;
    background: url() 50%;
    background-size: 100% 100%
}

.card-box .card-list .card-iconfix {
    position: absolute;
    right: .12rem
}

.card-box .card-listbtn {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 .12rem .02rem
}

.card-box .card-listbtn .card-btnbox {
    width: 33.3%;
    box-sizing: border-box;
    padding: 0 .04rem;
    margin-bottom: .08rem
}

.card-box .card-listbtn.card-fourbtn .card-btnbox {
    width: 25%
}

.card-box .card-listbtn .card-btn {
    flex-shrink: 0;
    width: 100%;
    height: .24rem;
    line-height: .26rem;
    background: #f4f4f7;
    border-radius: .04rem;
    font-size: .13rem;
    color: #666;
    text-align: center;
    box-sizing: border-box
}

.card-box .card-time {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    padding: 0 .12rem 0 .16rem
}

.card-box .card-time .card-more {
    position: relative;
    margin-left: auto;
    min-width: .6rem;
    padding-right: .1rem;
    padding-left: .1rem;
    height: .32rem;
    line-height: .32rem;
    background: #f4f4f7;
    border-radius: .04rem;
    font-size: .14rem;
    text-align: center;
    color: #666
}

.card-box .card-time .card-more.left {
    margin-right: .08rem
}

.card-box .card-time .card-more i {
    display: inline-block;
    position: relative;
    width: .06rem;
    height: .06rem;
    margin-top: -.03rem;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 1px solid #666;
    border-left: 1px solid #666
}

.card-box .card-time .card-num {
    font-size: .15rem;
    color: #000
}

.card-box .card-time .card-week {
    font-size: .12rem;
    color: #666
}

.card-box .card-timebox {
    -webkit-box-flex: 1;
    flex: 1
}

.card-box .card-timerow {
    padding: 0 .12rem 0 .16rem
}

.card-box .card-timerow,.card-box .card-timerow .card-timebox {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center
}

.card-box .card-timerow .card-num {
    font-size: .14rem;
    color: #000
}

.card-box .card-timerow .card-numbig {
    font-size: .15rem;
    color: #000
}

.card-box .card-timerow .card-mricon {
    margin-left: auto;
    margin-right: -.04rem;
    width: .16rem;
    height: .16rem;
    background: url() 50%;
    background-size: 100% 100%
}

.card-box .card-timerow .card-week {
    margin-left: .12rem;
    font-size: .12rem;
    color: #666
}

.card-box .card-timerow .card-more {
    position: relative;
    margin-left: auto;
    min-width: .6rem;
    padding-right: .1rem;
    padding-left: .1rem;
    height: .32rem;
    line-height: .32rem;
    background: #f4f4f7;
    border-radius: .04rem;
    font-size: .14rem;
    text-align: center;
    color: #666
}

.card-box .card-timerow .card-more i {
    display: inline-block;
    position: relative;
    width: .06rem;
    height: .06rem;
    margin-top: -.03rem;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 1px solid #666;
    border-left: 1px solid #666
}

.card-box .card-linetime {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    padding: 0 .12rem 0 .16rem
}

.card-box .card-linetime .card-name {
    font-size: .16rem;
    color: #000
}

.card-box .card-linetime .card-name span {
    padding-left: .11rem;
    font-size: .12rem;
    color: #666
}

.card-box .card-linetime .card-num {
    font-size: .14rem;
    color: #000
}

.card-box .card-linetime .card-week {
    margin-left: .12rem;
    font-size: .12rem;
    color: #717171
}

.card-box .card-tips {
    margin-top: -.14rem;
    padding: .1rem .16rem;
    font-size: .13rem;
    line-height: .24rem
}

.card-box .card-tips p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.card-box .card-tips .card-msg {
    color: #333
}

.card-box .card-tips .card-tipmsg {
    color: #999
}

.card-box .card-k3 {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.card-box .card-k3 .card-dice {
    margin: .18rem .16rem .15rem 0;
    max-width: 50%
}

.card-box .card-k3 .card-dice em {
    display: inline-block;
    font-family: typopro;
    width: .36rem;
    height: .36rem;
    margin: 0 .02rem .04rem;
    line-height: .39rem;
    font-size: .24rem;
    text-align: center;
    color: #fff
}

.card-box .card-k3 .card-dice em.dice-00 {
    background: url(//m-static.jiangduoduo.com/kaijiang/img/697ea26.png) 50%;
    background-size: 100% 100%
}

.card-box .card-k3 .card-dice em.dice-01 {
    background: url() 50%;
    background-size: 100% 100%
}

.card-box .card-k3 .card-dice em.dice-02 {
    background: url() 50%;
    background-size: 100% 100%
}

.card-box .card-k3 .card-dice em.dice-03 {
    background: url() 50%;
    background-size: 100% 100%
}

.card-box .card-k3 .card-dice em.dice-04 {
    background: url(//m-static.jiangduoduo.com/kaijiang/img/ddf2d7f.png) 50%;
    background-size: 100% 100%
}

.card-box .card-k3 .card-dice em.dice-05 {
    background: url(//m-static.jiangduoduo.com/kaijiang/img/af13595.png) 50%;
    background-size: 100% 100%
}

.card-box .card-k3 .card-dice em.dice-06 {
    background: url(//m-static.jiangduoduo.com/kaijiang/img/c134a68.png) 50%;
    background-size: 100% 100%
}

.card-box .card-k3 .card-ball {
    margin: .18rem 0 .15rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 45%
}

.card-box .card-11.card-ball {
    margin: .18rem auto .16rem;
    max-width: 100%
}

.card-box .card-3dbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    padding: .1rem .16rem
}

.card-box .card-3dbox.card-11 {
    padding: .06rem .16rem .07rem
}

.card-box .card-3dbox .card-3dnum {
    margin-right: .06rem;
    word-break: break-all;
    font-size: 0
}

.card-box .card-3dbox .card-3dnum em {
    font-family: typopro;
    font-size: .22rem;
    color: #f84848;
    padding-right: .1rem;
    display: inline-block
}

.card-box .card-3dbox .card-3dnum em.blue-ball {
    color: #3775ff
}

.card-box .card-3dbox .card-msg {
    font-size: .13rem;
    color: #333;
    max-width: 37%;
    word-break: break-all
}

.card-box .card-3dbox .card-mricon {
    margin-left: auto;
    margin-right: -.04rem;
    width: .16rem;
    height: .16rem;
    background: url() 50%;
    background-size: 100% 100%
}

.card-box .card-sfbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    padding: .14rem .16rem
}

.card-box .card-sfbox.card-k3box {
    padding: .11rem .16rem .12rem
}

.card-box .card-sfbox .card-sfnum {
    margin-right: .06rem;
    word-break: break-all;
    font-size: 0
}

.card-box .card-sfbox .card-sfnum em {
    font-family: typopro;
    font-size: .22rem;
    color: #f84848;
    padding-right: .12rem;
    display: inline-block
}

.card-box .card-sfbox .card-sfnum em.blue-ball {
    color: #3775ff
}

.card-box .card-sfbox .card-mricon {
    margin-left: auto;
    margin-right: -.04rem;
    width: .16rem;
    height: .16rem;
    background: url() 50%;
    background-size: 100% 100%
}

.card-box .card-ball {
    margin: .18rem auto .1rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 90%
}

.card-box .card-ball em {
    display: inline-block;
    font-family: typopro;
    width: .35rem;
    height: .35rem;
    margin: 0 .02rem .04rem;
    line-height: .37rem;
    font-size: .24rem;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    background-image: linear-gradient(132deg,#fd6161,#f94b4b);
    background-position: 50%
}

.card-box .card-ball em.blue-ball {
    background-image: linear-gradient(132deg,#588bff,#3775ff)
}

.card-box .card-ball.ball-small {
    margin-right: .05rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 87%
}

.card-box .card-ball.ball-small em {
    width: .32rem;
    height: .32rem;
    margin: 0 .03rem .04rem;
    line-height: .37rem;
    font-size: .22rem;
    text-align: center;
    color: #fff
}

.card-box .card-vic {
    min-width: 0;
    -webkit-box-flex: 1;
    flex: 1;
    padding: 0 .12rem;
    margin: .18rem auto .1rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap
}

.card-box .card-vic.card-sfc {
    margin: .19rem auto .15rem
}

.card-box .card-vic em {
    display: inline-block;
    font-family: typopro;
    width: .16rem;
    height: .32rem;
    margin-bottom: .04rem;
    margin-left: .04rem;
    line-height: .34rem;
    font-size: .22rem;
    text-align: center;
    color: #fff;
    border-radius: .04rem;
    background-image: linear-gradient(133deg,#ff6969,#f84848)
}

.card-box .card-match {
    position: relative;
    margin: .18rem auto .1rem;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%
}

.card-box .card-match,.card-box .card-match .match-box {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal
}

.card-box .card-match .match-box {
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex: 1;
    width: 0
}

.card-box .card-match .match-box .match-name {
    font-size: .14rem;
    color: #333;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden
}

.card-box .card-match .match-box .match-img {
    width: .28rem;
    height: .28rem;
    line-height: .28rem
}

.card-box .card-match .match-box .match-img img {
    max-width: .28rem;
    max-height: .28rem
}

.card-box .card-match .match-score {
    width: auto;
    padding: 0 .1rem;
    text-align: center;
    font-size: .24rem;
    font-family: typopro;
    color: #f84948
}

.card-box .card-match .match-all {
    padding: 0 .04rem;
    color: #151515
}

.card-box .card-match .match-nums {
    padding: 0 .04rem;
    color: #f84848
}

.card-box .card-money {
    -webkit-box-orient: horizontal;
    flex-direction: row;
    justify-content: space-around
}

.card-box .card-money,.card-box .card-money .card-monbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-direction: normal
}

.card-box .card-money .card-monbox {
    position: relative;
    -webkit-box-orient: vertical;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: .75rem;
    text-align: center;
    width: 100%
}

.card-box .card-money .card-monbox:before {
    width: .01rem
}

.card-box .card-money .card-monbox:before,.card-box .card-money .card-monbox:last-child:before {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -.13rem;
    content: "";
    height: .26rem;
    background: #d8d8d8
}

.card-box .card-money .card-monbox:last-child:before {
    width: 0
}

.card-box .card-money .card-tit {
    padding-bottom: .05rem;
    font-size: .12rem;
    color: #666
}

.card-box .card-money .card-nums {
    font-family: typopro;
    font-size: .18rem;
    color: #f84848;
    width: 93%
}

.card-box .card-money .card-nums span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    vertical-align: middle
}

.card-box .card-money .card-nums em {
    display: inline-block;
    font-family: PingFangSC-Regular;
    font-size: .12rem;
    color: #f84848;
    vertical-align: middle
}

.card-box .card-money.card-moneyonly {
    height: .36rem;
    margin-top: -.03rem;
    margin-bottom: .16rem
}

.card-box .card-money.card-moneyonly .card-monbox {
    height: auto
}

.card-box .card-money.card-moneyonly .card-monbox:first-child:before {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -.08rem;
    content: "";
    width: .01rem;
    height: .16rem;
    background: #d8d8d8
}

.card-box .card-money.card-moneyonly .card-nums b {
    font-size: .12rem;
    font-weight: 400;
    color: #666;
    vertical-align: text-bottom
}

.card-box .card-money.card-moneyonly .card-nums span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64%;
    vertical-align: middle
}

.has-nav {
    padding-top: .4rem
}

.has-nav .nav-con {
    width: 100%;
    position: fixed;
    z-index: 8
}

.has-header .has-nav .nav-con {
    top: 44px
}

.has-nav .nav-con {
    top: 0
}

.nav-con .nav-list {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    font-size: 0;
    background: #fff;
    border-bottom: .5px solid #d8d8d8
}

.nav-con .nav-list li {
    width: 100%;
    position: relative;
    display: inline-block;
    height: .4rem;
    line-height: .4rem;
    text-align: center;
    font-size: .15rem;
    color: #666
}

.nav-con .nav-list li.active {
    color: #333
}

.nav-con .nav-list li.active:after {
    content: "";
    position: absolute;
    bottom: .05rem;
    left: 50%;
    margin-left: -.1rem;
    width: .2rem;
    height: .03rem;
    background: #f84848;
    border-radius: .015rem
}

.card-more {
    position: relative;
    margin-left: auto;
    min-width: .6rem;
    padding-right: .1rem;
    padding-left: .1rem;
    height: .32rem;
    line-height: .32rem;
    background: #f4f4f7;
    border-radius: .04rem;
    font-size: .14rem;
    text-align: center;
    color: #666
}

.card-more i {
    display: inline-block;
    position: relative;
    width: .06rem;
    height: .06rem;
    margin-top: -.03rem;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 1px solid #666;
    border-left: 1px solid #666
}

.mengceng {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    display: none
}

.mengceng.show {
    display: block
}

.mask {
    top: 0;
    height: 100%;
    background: rgba(0,0,0,.5)
}

.fix-box,.mask {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 9
}

.fix-box {
    bottom: 0
}

.bottom-title,.fix-box {
    background: #fff;
    border-radius: .16rem .16rem 0 0
}

.bottom-title {
    position: relative;
    font-size: .16rem;
    color: #424242;
    height: .6rem;
    line-height: .6rem;
    text-align: center
}

.bottom-title .bottom-close {
    position: absolute;
    top: 50%;
    margin-top: -.15rem;
    right: .1rem;
    width: .3rem;
    height: .3rem;
    background: url();
    background-position: 50%;
    background-size: 66% 66%;
    background-repeat: no-repeat;
    box-sizing: border-box
}

.bottom-con {
    background: #fff;
    max-height: 3rem;
    overflow-y: auto;
    border-top: 1px solid #d8d8d8
}

.bottom-con li {
    padding: .12rem .2rem .13rem .16rem;
    border-bottom: 1px solid #d8d8d8
}

.bottom-con li:last-child {
    border-bottom: 0 solid #d8d8d8
}

.bottom-con .bot-time {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.bottom-con .bot-num {
    font-size: .14rem;
    color: #000
}

.bottom-con .bot-week {
    font-size: .12rem;
    color: #717171
}

.bottom-con .bot-ball em {
    font-family: typopro;
    font-size: .2rem;
    line-height: 1;
    color: #f84848;
    padding-right: .1rem;
    margin-top: .1rem;
    display: inline-block
}

.bottom-con .bot-ball em.ball-blue {
    color: #3775ff
}

.bottom-choise {
    background: #fff;
    max-height: 3rem;
    overflow-y: auto;
    border-top: 1px solid #d8d8d8
}

.bottom-choise li {
    padding: .16rem .16rem 0
}

.bottom-choise li p {
    text-align: center;
    width: 100%;
    background: #f4f4f7;
    height: .36rem;
    line-height: .36rem;
    font-size: .16rem;
    color: #666;
    border-radius: .04rem
}

.bottom-choise li.active p {
    background: #fff;
    border: 1px solid #fd8e8f;
    color: #f84848
}

.bottom-choise li:last-child {
    padding-bottom: .16rem
}

.bottom-more {
    height: .5rem;
    line-height: .5rem;
    font-size: .16rem;
    text-align: center;
    background: #fff;
    color: #f84848;
    border-top: 1px solid #d8d8d8
}

.bottom-more i {
    display: inline-block;
    position: relative;
    width: .06rem;
    height: .06rem;
    vertical-align: middle;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 1px solid #f84848;
    border-left: 1px solid #f84848
}

.bottom-cancle {
    height: .5rem;
    line-height: .5rem;
    font-size: .16rem;
    text-align: center;
    background: #fff;
    color: #999;
    border-top: 1px solid #d8d8d8
}
